/*****************************************************
 * 支出項目画面の描画を行うクラス
 * @extends AbstractResultsView
 * @author kino
 *****************************************************/
/**
 * コンストラクタ
 * @param {OutgoingResults} data このビューが表示するデータ。非null。
 */
function OutgoingResultsView(session, query, data){
	/** プロパティの継承 */
	AbstractResultsView.call(this, session, query, data);
}

/** メソッドの継承 */
ClassUtility.inherit(OutgoingResultsView, AbstractResultsView);

/**
 * 保持している一覧データから、一覧のテーブル表現を構築する。
 * @return {String} 一覧のHTMLテーブル表現。<table>～</table>。
 */
OutgoingResultsView.prototype.createTable = function(){
	// 合計の算出
    var sumOutgoing = 0;
    for (var i = 0; i < this.data.length; i++) {
        sumOutgoing += this.data[i].outgoing;
    }

	// テーブルの構築
    var html = '';
    html += '<table class="result-table">';
    html += '<tr><th>日付</th><th>予算項目</th><th>支出項目</th><th>支出金額</th></tr>';
    for (var i = 0; i < this.data.length; i++) {
        html += '<tr>';
        html += '<td>' + this.data[i].resistDate + '</td>';
        html += '<td>' + this.data[i].budgetName + '</td>';
        html += '<td>' + this.data[i].outgoingName + '</td>';
        html += '<td>' + this.data[i].outgoing + '</td>';
        html += '<tr>';
    }
	html += '<tr>';
    html += '<td colspan="3">合計</td>';
    html += '<td>' + sumOutgoing + '</td>';
	html += '</tr>';
	html += '</table>';
    return html;
}

/**
 * 表示するデータタイプにあった、新規データ入力欄を構築する。
 * @return {String} 入力フォームのHTML文字列。
 */
OutgoingResultsView.prototype.createInputForm = function(){
    this.searchBudgetList();
    return '';
}

/**
 * サーバに対し、予算項目一覧を要求する
 */
OutgoingResultsView.prototype.searchBudgetList = function(){
    var postQuery = this.createSearchBudgetListQuery();
    SearchLogic.searchBudgetList(this, postQuery);
}

/**
 * 保持しているセッション情報・クエリ情報から、予算項目一覧取得時にサーバに投げるPOSTクエリを構築する
 * @return {Map} POSTクエリデータ。
 */
OutgoingResultsView.prototype.createSearchBudgetListQuery = function(){
    var post = {};
    post.action = "search-budget-list";
    post.sessionId = this.session.sessionId;
    post.year = this.query.year;
    post.month = this.query.month;
    return post;
}

/**
 * 予算項目リスト結果取得時に呼ばれるコールバックメソッド
 */
OutgoingResultsView.prototype.searchBudgetListCallback = function(result){
    $('#input-form-area').empty();
    $('#input-form-area').append(this.constructInputForm(result));
	this.setInputFormEvent();
}

/**
 * 表示するデータタイプにあった、新規データ入力欄を構築する。
 * @return {String} 入力フォームのHTML文字列。
 */
OutgoingResultsView.prototype.constructInputForm = function(budgets){
    var result = '';
    result += '<select id="budget-item-select">'
    for (var i = 0; i < budgets.length; i++) {
        result += '<option value="' + budgets[i].budgetId + '">' + budgets[i].budgetName + '</option>';
    }
    result += '</select>';
    result += '<input type="text" size="50" id="outgoing-name"/>';
	result += '<input type="text" size="20" id="outgoing"/>';
	result += '<input type="button" id="add-item-button" value="入力"/>';
    return result;
}

/**
 * 結果一覧エリアに対する各種イベントを設定する。
 */
OutgoingResultsView.prototype.setResultTableEvent = function(){
	// 特になし
}

/**
 * 新規データ入力フォームに対する各種イベントを設定する。
 */
OutgoingResultsView.prototype.setInputFormEvent = function(){
	var self = this;
	$('#add-item-button').click(function(){
		var data = {};
	    data.type = ItemType.OUTGOING;
        data.budgetId = $('#budget-item-select').val();
        data.outgoingName = $('#outgoing-name').val();
        data.outgoing = $('#outgoing').val();
        // TODO 入力が足りなかったらエラーメッセージ表示して終了
		InputLogic.add(self, data);
	});
}

/**
 * 保持しているセッション情報・クエリ情報から、サーバに投げるPOSTクエリを構築する
 * @return {Map} POSTクエリデータ。
 */
OutgoingResultsView.prototype.createQuery = function(){
    var post = {};
	post.action = RequestType.SEARCH;
	post.type = ItemType.OUTGOING;
	post.sessionId = this.session.sessionId;
	post.year = this.query.year;
	post.month = this.query.month;
    return post;
}
